
<template>
  <div class="admin-withdrow-main" v-loading="boo.loading">
    <div class="model-content">
      <div class="model-item money-item">
        <div class="model-label">提现信息</div>
        <div class="model-form withdrow-money">
          <div class="form-label">提现金额</div>
          <div class="money-content flex-normal">
            <span class="money-icon">￥</span>
            <div class="money-input">
              <el-input  @blur="moneyChange" type="text" placeholder="请输入提现金额" v-model="params.money"></el-input>
              
            </div>
          </div>
          <div class="money-foot flex-between">
            <span class="tx-desc">本次提现共收取手续费：{{other['serviceCharge'] || '0.00'}}元，实际到账金额：{{other.accountMoney || '0.00'}}元</span>
            <div class="flex-normal">
              <span class="money-txt">可用余额：{{baseData['usableBalance'] || '0.00'}}</span>
              <span class="money-btn" @click="withdrowAll">全部提现</span>
            </div>
          </div>
        </div>
      </div>
      <div class="model-item">
        <div class="model-label">提现账户</div>
        <div class="model-form flex-normal card-content">
          <img class="card-logo" :src="`data:image/jpg;base64,${baseData['logo']}`">
          <div class="card-val form-val flex-normal">
            {{`${baseData['accountUserName']}(${baseData['bankCard']})`}}
          </div>
        </div>
      </div>
      <div class="model-item">
        <div class="model-label">提现验证</div>
        <div class="model-form flex-normal">
          <div class="form-label">支付密码</div>
          <div class="form-val flex-normal">
            <div class="LPay-code-container">
              <div id="ipt_pwd2" class="flex-normal ipt-pwd-content">
                <span id="LOGPASS2_SHOW">请输入密码</span>
                <input id="LOGPASS2" class="default input_search" type="password" disabled="disabled" />
                <div id="keyboardBtn2" class="ipt_pwd_rjp default"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-content">
        <el-button class="purshase-btn" type="primary" size="small" @click="showDialog" :loading="boo.isSubmit">立即提现</el-button>
      </div>
    </div>
    <div class="mark-content flex-column">
      <span class="mark-label">订购须知：</span>
      <span class="mark-row">1、如需充值，请使用手机银行或者网银，打款至存管账户</span>
      <span class="mark-row">2、存管账户转账仅限于工作日工作时间请安排好打款时间；</span>
      <span class="mark-row">3、转账充值操作必须使用与存管账户的同名账户，不支持非同名账户转账；</span>
      <span class="mark-row">4、服务过程中，如果有任何疑问，可致电客服：
          400-810-0049反馈</span>
    </div>
    <!-- 提现验证 -->
    <dialog-normal
      ref="dialog-withdrow"
      :dialog-prop="{
        title: '短信验证',
        height: '300px',
        width: '600px',
        submit: '立即提现'
      }" @normal-submit="submitDialog">
      <template #dialog-content>
        <div class="dialog-code-container">
          <div class="flex-normal">
            <span class="Lpay-label">验证手机号：</span>
            <div class="flex-normal ipt-pwd-content">
              <span> {{ baseData.phone }}</span>
            </div>
          </div>
          <div class="flex-normal">
            <span class="Lpay-label">验证码：</span>
            <div class="flex-normal ipt-pwd-content">
              <el-input v-model="code" placeholder="请输入手机验证码"></el-input>
            </div>
          </div>
        </div>
      </template>
    </dialog-normal>
    <!-- 提现验证 -->
    <dialog-normal
      ref="dialog-sfz"
      :dialog-prop="{
        title: '补充身份证',
        width: '400px',
        submit: '立即提现'
      }" @normal-submit="submitDialogSFZ">
      <template #dialog-content v-if="$refs['dialog-sfz'] && $refs['dialog-sfz'].showDialog">
        <div class="dialog-code-container flex-between">
          <div class="sfz-item flex-column">
            <upload-image v-model="sfzVO['certificatePhotoFront']" icon-name="sfz-zm">
            </upload-image>
            <span class="warning-txt">持卡人身份证（正面）</span>
          </div>
          <div class="sfz-item flex-column">
            <upload-image v-model="sfzVO['certificatePhotoBack']" icon-name="sfz-fm">
            </upload-image>
            <span class="warning-txt">持卡人身份证（背面）</span>
          </div>
        </div>
      </template>
    </dialog-normal>
  </div>
</template>

<script>
import {getRandom
} from "@/api/financeManage/shop-finance";
import {LLKeyBord, isDecimal} from '@/utils/tools.js'
import {
  getWithdrowMessage,
  applyWithdrow,
  conformWithdrow,
  modifyUserinfoIndividual
} from "@/api/financeManage/shop-withdrow.js";
import {
  shopWithdrawalMoney
} from "@/api/financeManage/shop-finance.js";
export default {
  components: {
    "dialog-normal": () => import("@/rhComponents/dialog/normal-dialog"),
    'upload-image': () => import('@/views/components/uploadImage/index')
  },
  data() {
    return {
      options: {},
      passwordInstance: null,
      boo: {
        loading: false,
        isSubmit: false
      },
      other: {},
      baseData: {},
      params: {},
      code: '',
      sfzVO: {}
    };
  },
  mounted(){
    let _self = this
    _self.initPage()
  },
  methods: {
    moneyChange(){
      let _self = this
      let {money} = _self.params
      if(!isDecimal(money)) {
        return _self.$message.error('请输入正确金额')
      }
      if(parseFloat(money) > parseFloat(_self.baseData['usableBalance'])) {
        return _self.$message.error('提现金额不能超过余额')
      }
      _self.shopWithdrawalMoney()
    },
    initPage(){
      let _self = this
      _self.boo.loading = true
      getWithdrowMessage().then(res => {
        const {data} = res
        _self.baseData = data
      }).finally(() => {
        _self.boo.loading = false
      })
      _self.initPWD()
    }, 
    async initPWD(){
      let _self = this
      await _self.getRandomPage()
      let params = {
        click_objId: '#keyboardBtn2', 
        Input_texId: '#LOGPASS2',
        parent_objId: '#ipt_pwd2',
        placeholderId: '#LOGPASS2_SHOW'
      }
      const passowrd = LLKeyBord(params, _self.options) 
      passowrd.initOptions()
      _self.passwordInstance = passowrd
    },
    async shopWithdrawalMoney(){
      let _self = this, isSuccess = false
      await shopWithdrawalMoney({money: _self.params['money'] || '0.00'}).then(res => {
        _self.other = res.data
        _self.isSuccess = true
      })
      return isSuccess
    },
    withdrowAll(){
      this.$set(this.params, 'money', this.baseData['usableBalance'])
      this.shopWithdrawalMoney()
    },
    async getRandomPage(){
      let _self = this
      await getRandom().then(res => {
        _self.options = res.data
      })
    },
    showDialog(){
      let _self = this
      const vm = _self.$refs['dialog-withdrow']
      const { money } = _self.params
      // 获取国密密文
      _self.passwordInstance.setRandKey(_self.options.random_value) // 先设置随机key
      const password = _self.passwordInstance.getOutputSM() // 国密加密密码
      const hash = _self.passwordInstance.getHash() // RSA加密密码
      if(!hash || hash == '') return _self.$message.error('密码不能为空')
      if(!isDecimal(money)) return _self.$message.error('请输入正确金额')
      if(parseFloat(money) > parseFloat(_self.baseData['usableBalance'])) return _self.$message.error('提现金额不能超过余额')
      let props = {
        password: password,
        random_key: _self.options['random_key'],
        money: money || '0.00'
      }
      _self.boo.isSubmit = true
      applyWithdrow(props).then(res => {
        vm.showDialog = true
      }).catch((err) => {
        _self.initPWD()
      }).finally(() => {
        _self.boo.isSubmit = false
      })
      
    },
    submitDialog(){
      let _self = this
      const vm = _self.$refs['dialog-withdrow']
      if(!_self.code || _self.code == '') return _self.$message.error('验证码不能为空')
      vm.loading = true
      conformWithdrow({code: _self.code}).then(res => {
        const { code, msg } = res
        if(code == 200){
          _self.$message.success(msg)
          _self.initPage()
        }else if(code == 600){
          const vmSFZ = _self.$refs['dialog-sfz']
          _self.sfzVO = {}
          vmSFZ.showDialog = true
        }
        vm.showDialog = false
      }).finally(() => {
        vm.loading = false
      })
    },
    
    submitDialogSFZ(){
      let _self = this
      const vm = _self.$refs['dialog-sfz'], {certificatePhotoFront, certificatePhotoBack} = _self.sfzVO
      if(!certificatePhotoFront || certificatePhotoFront == '') return _self.$message.error('请完善身份证正面')
      if(!certificatePhotoBack || certificatePhotoBack == '') return _self.$message.error('请完善身份证反面')
      vm.loading = true
      modifyUserinfoIndividual(_self.sfzVO).then(res => {
        _self.$message.success(res.msg)
        _self.initPage()
        vm.showDialog = false
      }).finally(() => {
        vm.loading = false
      })
    },
  }
};
</script>
<style scoped lang="scss">
.admin-withdrow-main{
  display: grid;
  grid-template-columns: 710px 1fr;
  gap: 20px;
  padding: 0 20px;
  .model-content{
    padding-right: 200px;
  }
  .model-item ::v-deep{
    margin-bottom: 25px;
    .el-input__inner{
      border: none !important;
    }
    .model-label{
      color: #0003AA;
      font-size: 14px;
      padding-bottom: 15px;
    }
    .model-form{
      position: relative;
      margin-bottom: 15px;
      padding-left: 20px;
      .form-label{
        font-size: 13px;
        color: #3D3D3D;
        width: 80px;
      }
      .form-val{
        flex: 1;
        position: relative;
      }
      .LPay-code-container{
        width: 100%;
      }
      .ipt-pwd-content{
        height: 40px;
        border-bottom: 1px solid #D8D8D8;
      }
    }
    .money-content{
      border-bottom: 1px dotted #D8D8D8;
      padding-top: 15px;
      .money-icon{
        font-size: 12px;
        color: #3D3D3D;
      }
    }
    .money-foot{
      margin-top: 10px;
      // justify-content: flex-end;
      .tx-desc{
        background: rgba(248, 213, 9, 0.1);
        color: #0003AA;
        font-size: 12px;
        border-radius: 3px;
        padding: 6px 10px;
      }
      .money-txt{
        font-size: 12px;
        color: #3D3D3D;
      }
      .money-btn{
        font-size: 12px;
        color: #0003AA;
        cursor: pointer;
        margin-left: 15px;
      }
    }
  }
}
.admin-withdrow-container{
  padding: 0 30px;
  
  .mark-content{
    padding-left: 80px;
    .mark-label{
      font-size: 14px;
      color: #333;
      margin-bottom: 10px;
    }
    .mark-label, .mark-row{
      color: #3D3D3D;
      font-size: 12px;
      line-height: 1.6;
      text-align: justify;
    }
  }
  
  .btn-content{
    margin-top: 30px;
    padding-bottom: 50px;
    .purshase-btn{
      width: 280px;
    }
  }
}
.card-content{
  .card-logo{
    width: vw(20);
    height: vh(20);
    margin-right: vw(10);
    object-fit: scale-down;
  }
  .card-val{
    color: #444444;
    font-size: vh(12);
  }
}
.dialog-code-container ::v-deep{
  .el-input__inner{
    border: none;
  }
  .code-btn-unit{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background: rgba(0, 3, 170, 0.1);
    border-radius: vh(3);
    height: vh(36);
    padding: 0 vw(15);
    .btn-txt{
      font-size: 13px;
      color: #0003AA;
    }
  }
  .ipt-pwd-content{
    height: 60px;
    position: relative;
    width: 60%;
    border-bottom: 1px solid #D8D8D8;
    margin-bottom: 10px;
    .placehoder-txt{
      color: #999;
      font-size: 13px;
    }
  }
  .Lpay-label{
    font-size: 13px;
    width: 120px;
  }

}
.dialog-code-container{
  .sfz-item{
    text-align: center
  }
}
</style>